<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="body">
      <div class="project">
        <el-form
          :model="basicForm"
          label-position="top"
          :rules="basicRules"
          ref="basicFormRef"
        >
          <!-- 基本信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              基本信息
            </div>
            <div class="project-part-content">
              <el-row :gutter="24">
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="企业名称"
                    prop="name"
                  >
                    <el-input
                      v-model="basicForm.name"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="统一社会信用代码"
                    prop="identifier"
                  >
                    <el-input
                      v-model="basicForm.identifier"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="注册资本"
                    prop="registeredCapital"
                  >
                    <el-input
                      v-model="basicForm.registeredCapital"
                      :disabled="isDetail"
                      ><template slot="append"
                        >万元</template
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="注册/核准时间"
                    prop="registeredTime"
                  >
                    <el-date-picker
                      v-model="basicForm.registeredTime"
                      type="date"
                      :disabled="isDetail"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="注册地址"
                    prop="address"
                  >
                    <el-input
                      v-model="basicForm.address"
                      :disabled="isDetail"
                    ></el-input>
                    <!-- <el-select
                      placeholder=""
                      v-model="basicForm.address"
                      clearable
                      :disabled="isDetail"
                      filterable
                    >
                      <el-option
                        v-for="item in addressOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select> -->
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="企业类型"
                    prop="companyType"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.companyType"
                      clearable
                      :disabled="isDetail"
                      filterable
                    >
                      <el-option
                        v-for="item in companyTypeOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="引进/培育"
                    prop="serviceType"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.serviceType"
                      clearable
                      :disabled="isDetail"
                      filterable
                    >
                      <el-option
                        v-for="item in serviceTypeOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="大型企业"
                    prop="hugeCompany"
                  >
                    <el-select
                      placeholder=""
                      v-model="basicForm.hugeCompany"
                      clearable
                      :disabled="isDetail"
                      filterable
                    >
                      <el-option
                        v-for="item in ynOptions"
                        :key="item.dictValue"
                        :label="item.dictText"
                        :value="item.dictValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="招商引资/跟进培育（服务）信息概要"
                    prop="content"
                  >
                    <el-input
                      v-model="basicForm.content"
                      :disabled="isDetail"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="主要负责人"
                    prop="leader"
                  >
                    <el-input
                      v-model="basicForm.leader"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item
                    label="联系方式"
                    prop="leaderPhone"
                  >
                    <el-input
                      v-model="basicForm.leaderPhone"
                      :disabled="isDetail"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :sm="24" :md="12" :lg="8" :xl="6">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="basicForm.remark"
                      :disabled="isDetail"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                </el-col> -->
              </el-row>
            </div>
          </div>
          <!-- 节点信息 -->
          <div class="project-part">
            <div
              class="project-part-title project-part-title1"
            >
              附件材料
            </div>
            <div class="project-part-content">
              <table class="table">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>材料名称</th>
                    <th style="width: 40%">上传文件</th>
                    <th style="width: 20%" v-if="!isDetail">
                      操作
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(
                      item, index
                    ) in basicForm.attachInfoList"
                    :key="index"
                  >
                    <td>{{ item.orderIndex }}</td>
                    <td>{{ item.attachmentName }}</td>
                    <td>
                      <UploadVue
                        v-model="item.attachmentList"
                        :disabled="isDetail"
                      />
                    </td>
                    <td v-if="!isDetail">
                      <div class="table-btn"></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="line" v-show="!isDetail">
      <el-button @click="saveInfo" class="save-btn"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import UploadVue from '@/components/upload'
import {
  addProjectInfo,
  queryProjectDetail,
  queryAddressList
} from '@/api/MarketSubjectRegistration'
import { getDictOptions } from '@/utils/dict'

export default {
  props: {
    pkid: String,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb,
    UploadVue
  },
  data() {
    return {
      basicForm: {
        pkid: '',
        name: '',
        identifier: '',
        registeredCapital: '',
        registeredTime: '',
        companyType: '',
        address: '',
        serviceType: '',
        hugeCompany: '',
        content: '',
        leader: '',
        remark: '',
        leaderPhone: '',
        attachInfoList: [
          {
            orderIndex: 1,
            attachmentName: '工商核实材料',
            attachmentList: []
          },
          {
            orderIndex: 2,
            attachmentName: '房产证',
            attachmentList: []
          },
          {
            orderIndex: 3,
            attachmentName: '街道派出所出具的地址变更说明',
            attachmentList: []
          },
          {
            orderIndex: 4,
            attachmentName: '地址说明申请书',
            attachmentList: []
          },
          {
            orderIndex: 5,
            attachmentName: '地址信息核实情况表',
            attachmentList: []
          },
          {
            orderIndex: 6,
            attachmentName: '地址说明',
            attachmentList: []
          },
          {
            orderIndex: 7,
            attachmentName: '营业执照影印件',
            attachmentList: []
          }
        ]
      },
      fileConfig: {
        工商核实材料: 0,
        房产证: 1,
        街道派出所出具的地址变更说明: 2,
        地址说明申请书: 3,
        地址信息核实情况表: 4,
        地址说明: 5,
        营业执照影印件: 6
      },
      basicRules: {
        name: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }
        ],
        registeredCapita: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,6})?$/,
            message: '请输入最多六位小数的正数',
            trigger: 'blur'
          }
        ],
        leaderPhone: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
              }
              const phoneReg =
                /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
              const telReg =
                /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/
              if (
                !phoneReg.test(value) &&
                !telReg.test(value)
              ) {
                if (!phoneReg.test(value)) {
                  callback(new Error('请输入正确手机号'))
                } else {
                  callback(new Error('请输入正确的座机号'))
                }
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      companyTypeOptions: [],
      addressOptions: [],
      serviceTypeOptions: [],
      ynOptions: [
        {
          dictValue: '是',
          dictText: '是'
        },
        {
          dictValue: '否',
          dictText: '否'
        }
      ]
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {
    'basicForm.fileName': function (val) {
      if (val === '') {
        this.basicForm.shpFile = ''
        this.basicForm.shpJson = ''
      }
    }
  },
  mounted() {
    this.initOptions()
    // this.getAddress()
    if (this.isEdit) {
      this.getDetailInfo()
    }
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions(
        'zhcy_qylx,zhcy_yjpy_fw'
      )
      this.companyTypeOptions = data.filter(
        (i) => i.dictCode === 'zhcy_qylx'
      )[0].resourceDictItems
      this.serviceTypeOptions = data.filter(
        (i) => i.dictCode === 'zhcy_yjpy_fw'
      )[0].resourceDictItems
    },
    async getAddress() {
      const res = await queryAddressList()
      this.addressOptions = res.data
    },
    // 获取项目详情
    getDetailInfo() {
      this.loading = true
      queryProjectDetail(this.pkid).then((res) => {
        if (res.success) {
          res.data.attachInfoList.forEach((item) => {
            this.basicForm.attachInfoList[
              this.fileConfig[item.type]
            ].attachmentList.push({
              pkid: item.pkid,
              refId: item.refId,
              fileId: item.fileId,
              fileName: item.fileName
            })
          })
          this.basicForm = {
            ...this.basicForm,
            ...res.data.marketRegisterManageInfo
          }
        }
        this.loading = false
      })
    },

    // 保存信息
    saveInfo() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          const data = JSON.parse(
            JSON.stringify(this.basicForm)
          )
          const attachInfoList = []
          data.attachInfoList.forEach((item) => {
            if (
              item.attachmentList &&
              item.attachmentList.length > 0
            ) {
              item.attachmentList.forEach((element) => {
                attachInfoList.push({
                  fileId: element.response.data,
                  pkid: element.pkid,
                  refId: element.refId,
                  type: item.attachmentName,
                  orderIndex: item.orderIndex
                })
              })
            }
          })
          delete data.attachInfoList
          const formData = {
            marketRegisterManageInfo: { ...data },
            attachInfoList: attachInfoList
          }

          addProjectInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功')
              this.$router.push({
                path: '/wisdomIndustry/EnterpriseInfoManagement/MarketSubjectRegistration/list',
                query: { refresh: Date.now() }
              })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  .table {
    border-collapse: collapse;
    width: 100%;
    box-sizing: border-box;
    thead {
      background-color: #f2f6fb;
    }
    td,
    th {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #6b767d;
      line-height: 42px;
      border: 1px solid #f2f6fb;
      text-align: center;
    }
    td {
      font-weight: normal;
    }
    tbody {
      tr {
        td {
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            width: 300px;
          }
          &:nth-child(3) {
            width: 300px;
          }
          &:nth-child(4) {
            max-width: 1000px;
          }
          &:nth-child(5) {
            width: 300px;
          }
        }
      }
    }
  }
  ::v-deep .el-upload {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
  }

  .shp-upload {
    cursor: pointer;
    height: 0px;
    ::v-deep .el-upload {
      position: relative !important;
      right: 0 !important;
      top: 0 !important;
      transform: none !important;
    }

    &-text {
      position: absolute;
      top: -49px;
      left: 260px;
      color: #00baff;
      min-width: 60px;
      line-height: 14px;
    }

    &-icon {
      position: absolute;
      width: 16px;
      height: 14px;
      top: -49px;
      left: 240px;
      background: url('~@/assets/images/wisdom-construction/upload-file.png');
      background-size: 100% 100%;
    }
  }
  .preview-button {
    position: absolute;
    top: 5px;
    left: 330px;
    background: #497fa3;
    border: 1px solid #497fa3;
    border-radius: 2px;
    color: white;
  }

  ::v-deep .cesium-viewer {
    height: 520px !important;
  }
}
</style>
